import React, { useEffect, useState } from 'react'
import { deleteFilesListByID, getFilesList } from '../../api'
import { Table, Button, Space, Modal, message as antdMessage } from 'antd'
import { ColumnsType } from 'antd/es/table';
import { useTranslation } from 'react-i18next';

interface FileListItemType {
	id: number
	date: string
	originName: string
	path: string
	user_name: string
	oss: string
}


const Index: React.FC = () => {
	const [list, setList] = useState<FileListItemType[]>([])
	const { t } = useTranslation()
	const columns: ColumnsType<FileListItemType> = [
		{
			key: 'originName',
			title: t('listFiles.fileName'),
			dataIndex: 'originName',
			fixed: true
		},
		{
			key: 'user_name',
			title: t('listFiles.auther'),
			dataIndex: 'user_name',
		},
		{
			key: 'path',
			title: t('listFiles.storagePath'),
			dataIndex: 'path',
		},
		{
			key: 'oss',
			title: t('listFiles.cloudPath'),
			dataIndex: 'oss',
		},
		{
			key: 'opration',
			title: t('listFiles.opration'),
			render(_: FileListItemType) {
				return (
					<Space>
						<Button type="primary" danger onClick={() => handleDelete(_.id)}>{t('listFiles.delete')}</Button>
					</Space>
				)
			}
		},
	];

	const fetchList = async () => {
		const resp = await getFilesList()
		setList(resp.data.data)
	}

	const handleDelete = (id: number) => {
		Modal.confirm({
			title: '确认要删除吗？',
			async onOk() {
				const resp = await deleteFilesListByID(id);
				const { code, message } = resp.data
				if (code === 200) {
					fetchList();
					antdMessage.success(message)
				}
			}
		})
	}

	useEffect(() => {
		fetchList()
	}, [])

	return (
		<div>
			<Table<FileListItemType>
				columns={columns}
				dataSource={list}
				rowKey={row => row.id}
				scroll={{ x: true }}
			/>
		</div>
	)
}

export default Index